<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="param.name" @keydown.enter="findGoodsByName()">
        <table border="1px" cellspacing="0">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>address</th>
                <th>price</th>
            </tr>
            <tr v-for="g in goods">
                <td>{{g.id}}</td>
                <td>{{g.name}}</td>
                <td>{{g.address}}</td>
                <td>{{g.price}}</td>
            </tr>
        </table>
    </div>

</body>
<script src="./js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            goods:[],
            param:{}
        },
        created(){
            //前端发送请求给后端
            let that=this;
            axios.get('http://localhost:8080/goods')
            .then(response=>{
                console.log(response.data)
                that.goods=response.data;
            })
        },
        methods:{
            findGoodsByName(){
                console.log(this.param.name)
                let that=this;
                axios.get('http://localhost:8080/goods?name='+this.param.name)
                    .then(response=>{
                        console.log(response.data)
                        that.goods=response.data;
                    })
                // axios({
                //     method: 'get',
                //     url: 'http://localhost:8080/goods',
                //     data:this.param,
                //     responseType: 'json'
                // })
                //     .then(function (response) {
                //         response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
                //     });
            }
        }
    })
</script>
</html>